<template>
	<view class="bg-f2">
		<u-navbar title="余额提现" :autoBack="true" :placeholder="true" leftIconColor="#ffffff" :titleStyle="{color: '#ffffff'}" bgColor="#1D1D20">
			<view class="u-nav-slot color-w" slot="right" @click="rightClick">历史提现</view>
		</u-navbar>
		<view class="contentBox p-20 border-box bg-white b-r-10">
			<view class="padding-tb margin-lr border-bottom">
				<view class="font-30 font-b">
					<text class="color-r">*</text>金额：
				</view>
				<input placeholder="请输入金额" border="none" type="number" v-model="amount" class="inputBox" />
			</view>
			<view class="flex align-center padding font-30">
				<view>可提现金额：</view>
				<view class="margin-left-sm">￥{{userInfo.balance || 0}}</view>
			</view>
			<view class="margin-tb tr-btn bg-yellow" @click="submit">确定</view>
		</view>
	</view>
</template>

<script>
	import { customerInfo } from '@/common/api/customer.js'
    import { toWithdrawal } from '@/common/api/xyc.js'
    import payPassword from '@/components/payPassword/payPassword.vue'
	import { checkAmount } from '@/common/utils/utils.js'
	import { mapState } from 'vuex';
	export default {
		components: {
			payPassword
		},
		data() {
			return {
				userBalance: this.mobile = this.$store.state.user.userInfo,
				toMoble: '',
				amount: '',
				assetsInfo: {},
				isShowPayPwd: false, // 是否显示支付密码弹窗
				show: false,
				toUserInfo: {},
			};
		},
		onLoad() {
            this.getAssetsSummary()
		},
		computed: {
			...mapState('user', ['userInfo'])
		},
		methods: {
			// 获取用户信息
			getCustomerInfo() {
				customerInfo().then(res => {
					this.userInfo = res.data.user || {}
					this.$store.commit('user/setUserInfo', res.data.user || {})
				})
			},
			rightClick(){
              uni.navigateTo({
                  url: '/pages/my/wallet/historyTransfer'
              })
			},
			submit() {
				let that = this
				if(!this.amount || !checkAmount(this.amount)) {
					return this.$msg('请输入正确提现金额,最多两位小数')
				}
				if(Number(this.amount) <= 0) {
					return this.$msg('请输入大于0的金额')
				}
				if(this.amount > this.userInfo.balance) {
					return this.$msg('提现金额不能大于余额')
				}
				uni.showModal({
					title: '提现提示',
					content: '是否确认申请提现？',
					success: (res) => {
						if (res.confirm) {
							let data = {
								amount: that.amount
							}
							toWithdrawal(data).then(res => {
								if(res.code == 200){
									uni.showToast({
										title: '申请提现成功',
										icon: 'none'
									});
									this.getCustomerInfo()
									setTimeout(()=> {
										uni.navigateBack()
									},1000)
								}else{
									uni.showToast({
										title: res.msg,
										icon: 'none'
									});
								}
							})
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg-f2{
		background-color: #f2f2f2 !important;
		min-height: 100vh;
	}
	.inputBox{
		display: block;
		height: 80rpx;
		font-size: 28rpx;
		line-height: 80rpx;
		padding: 10rpx 10rpx;
		margin-top: 10rpx;
		background-color: #f2f2f2;
	}
	.contentBox{
		width: calc(100% - 40rpx);
		margin: 20rpx auto;
	}
	.tr-btn {
		background: rgb(230, 0, 0);
		width: 80%;
		height: 82rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ffffff;
		margin: 50rpx auto 30rpx auto;
	}
</style>
